<template>
  <div id="app">

    <div class="container">
      <div class="row">

        <div class="col-8">
          <form ref="form" :model="form">

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  开始时间:<input v-model="form.kssj">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  结束时间:<input v-model="form.jssj">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  地址: <input v-model="form.jfdd">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  接访人: <input v-model="form.jfr">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  记录人:<input v-model="form.jlr">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  来访人:<input v-model="form.xfrxm">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  性别:<input v-model="form.xb_dm">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  年龄:<input v-model="form.nl">
                </div>
              </div>
            </div>


            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  民族:<input v-model="form.mz_dm">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  身份证:<input v-model="form.zjhm">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  文化程度:<input v-model="form.sjyzk_dm">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  工作单位:<input v-model="form.lfrgzdw">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  联系方式:<input v-model="form.lxff">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  个人简历:<input v-model="form.grjl">
                </div>
              </div>
            </div>


            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  家庭成员概况:<input v-model="form.jtcygk">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  来访事由:<input v-model="form.aqzy">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-24">
                <div class="form-item">
                  内容:<input v-model="form.nr">
                </div>
              </div>
            </div>


          </form>
        </div>
        <div class="col-16">
          <XfRecordModel
              :show-modal="ishow"
              :wsurl="'ws://172.16.100.81:8070/api/websocket'"
              formkey="1"
              btnType=4
              title="接 访 记 录 文 档"
              @open="ishow=true"
              @cancel="ishow=false"></XfRecordModel>
          <div class="row">
            <div class="col-24">
              <div class="form-item">
                <XfRecordPage
                    :wsurl="'ws://172.16.100.81:8070/api/websocket'"
                    formkey="1"
                    v-model="form.data"
                    btnType=5
                    @savedata="savedata($event)"
                    title="接 访 记 录 文 档"></XfRecordPage>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XfRecordModel from './components/XfRecordModel.vue'
import XfRecordPage from './components/XfRecordPage.vue'

export default {
  name: 'App',
  components: {
    XfRecordModel,
    XfRecordPage,
  },
  data() {
    return {
      ishow: false,
      form: {},
    }
  },
  methods: {

    savedata(item) {
      this.form = item;
      console.log(item)
    }
  }
}
</script>
<style>

.container {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
}

div {
  display: block;
}

.row {
  box-size: border-box;
  width: 100%;
}

.row::after, .row::before {
  display: table;
}

.row::after {
  clear: both;
}


[class*=col-] {
  float: left;
  box-sizing: border-box;
}

.col-24 {
  width: 100%;
}
.col-8 {
  width: 33%;
}
.col-16 {
  width: 66%;
}

.col-12 {
  width: 50%;
}

.xfrecordPage {
  height: 100%;
}

.deletelable {
  position: relative;
}

.deletelable:hover .del-icon {
  display: inline-block;
  position: absolute;
  left: -20px;
  padding: 10px;
  top: 15px;
}

.form-item {
  margin-top: 16px;
  font-size: 20px;
  line-height: 30px;
  box-sizing: border-box;
  display: block;
  font-weight: 300;
  overflow: inherit;
  position: relative;
}

.form-item .box {
  position: relative;


}

</style>
